<template>
  <div :class="['mala-button', disabledClass]" @click="handleClick">
    <div :class="['mala-button-inner', typeClass, roundClass, sizeClass]">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "mala-button"
}
</script>

<script setup>
import { computed } from "vue"
const emits = defineEmits(["click"])
const props = defineProps({
  type: {
    type: String,
    default: "primary"
  },
  round: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: "default"
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
// 覆盖原生点击事件
const handleClick = (event) => {
  if (props.disabled) return
  emits("click", event)
}
// 类型
const typeClass = computed(() => {
  let className = "mala-button-primary"
  switch(props.type) {
    case "primary":
      break
    case "success":
      className = "mala-button-success"
      break
    case "info":
      className = "mala-button-info"
      break
    case "warning":
      className = "mala-button-warning"
      break
    case "danger":
      className = "mala-button-danger"
      break
    default:
      console.warn(`${props.type} is invalid`)
  }
  return className
})
// 圆角
const roundClass = computed(() => props.round ? "mala-button-round" : "")
// 尺寸
const sizeClass = computed(() => {
  let className = "mala-button-default"
  switch(props.size) {
    case "default":
      break
    case "small":
      className = "mala-button-small"
      break
    case "large":
      className = "mala-button-large"
      break
    default:
      console.warn(`${props.size} is invalid`)
  }
  return className
})
// 禁用
const disabledClass = computed(() => props.disabled ? "mala-button-disabled" : "")
</script>